<!--
  步骤条容器
  props：
    bgColor string 容器背景颜色 default：#F7FCFF
    defaultActiveStep number 默认当前步骤
    activeColor string 激活颜色 default：#1CBC9A
    inactiveColor string 非激活颜色 default：#61677A

  slot：
    default 步骤条项
-->
<template>
  <div class="steps-wrapper" :style="varStyle">
    <van-steps
      :active="activeStep"
      :active-color="activeColor"
      :inactive-color="inactiveColor"
      @click-step="handleClickStep"
      >
      <slot :activeColor="activeColor" :inactiveColor="inactiveColor"></slot>
    </van-steps>
  </div>
</template>

<script>
import { Steps, Step } from "vant"
export default {
  name: "qm-steps",
  components: {
    [Steps.name]: Steps,
    [Step.name]: Step
  },
  props: {
    bgColor: {
      type: String,
      default: "#F7FCFF"
    },
    defaultActiveStep: {
      type: Number,
      default: 0
    },
    activeColor: {
      type: String,
      default: "#1CBC9A"
    },
    inactiveColor: {
      type: String,
      default: "#61677A"
    }
  },
  data() {
    return {
      activeStep: null
    }
  },
  computed: {
    varStyle() {
      return ({
        "--bg-color": this.bgColor
      })
    }
  },
  watch: {
    defaultActiveStep: {
      handler(newVal) {
        this.activeStep = newVal;
      },
      immediate: true
    }
  },
  methods: {
    handleClickStep(i) {
      this.activeStep = i;
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep {
  .van-steps--horizontal {
    padding: calc(30px * var(--ratio));
    background-color: var(--bg-color);
    overflow-x: auto;
    border-radius: calc(16px * var(--ratio));
    .van-steps__items {
      margin: 0;
      padding-bottom: 0;
      padding-top: 22px;
    }
  }
  
  .van-step--horizontal {
    .van-step__circle-container {
      top: -10px;
      left: 0;
      padding: 0;
      height: auto;
      line-height: 0;
      background-color: var(--bg-color);
    }

    .van-step__line {
      top: -10px;
    }

    &:last-child {
      position: relative;
      right: 0;
      flex: 0 0 auto;
    }
  }
}
</style>